<template>
  <div class="form-view-row">
    <label class="form-view-row-label">
      {{field.displayName}}

      <span v-if="intelligentCheckField" @click="openIntelligentStandard()" class="form-view-row-intelligent-rule-icon">
        <i class="iconfont icon-bangzhu"></i>
      </span>

      <div v-if="intelligentCheckField" class="form-view-row-intelligent-icon">
        <img :src="ilinkIcon" alt="" />
        <div></div>
      </div>

    </label>
    <div class="form-view-row-content base-file__preview" >
      <base-file-item v-for="(a, index) in _value" :Source="_value" :key="index" :file="a" readonly/>
    </div>

    <!-- 质检规范 -->
    <intelligent-standard-dialog 
      ref="intelligentStandard"
      :intelligent-config="intelligentConfig"
    />
  </div>
</template>

<script>
import IntelligentStandardDialog from './components/IntelligentStandardDialog.vue';

import { getOssUrl } from '@src/util/assets'
import { findComponentUpward } from '@src/util/assist';

const ilinkIcon = getOssUrl('/icon-ilink-mini.png')

export default {
  name: 'form-attachment-view',
  inject: {
    initData: {
      default: {}
    }
  },
  props: {
    field: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // intelligentConfig: {},
      ilinkIcon
    }
  },
  computed: {
    _value(){
      // value 是通过后端数据给的，但是会存在有的数据为 [null, null] 的情况，且后端定位不到问题，所以前端进行过滤。
      return this.value?.length ? this.value.filter(item => item && item.id) : []
    },
    // 是否开启智能质检
    intelligentCheckField() {
      if (!this.isIntelligentFieldShow) return
      const taskView = findComponentUpward(this, 'task-view')
      const taskReceiptDetailView = findComponentUpward(this, 'task-receipt-detail-view')
      // 如果是工单
      if (taskView) {
        if (Array.isArray(this.intelligentConfig.taskCheckFields) && this.intelligentConfig.taskCheckFields.length > 0) {
          return this.intelligentConfig.taskCheckFields.some(item => item.task === this.field.id)
        }
      }

      if (taskReceiptDetailView) {
        if (Array.isArray(this.intelligentConfig.taskCheckFields) && this.intelligentConfig.taskCheckFields.length > 0) {
          return this.intelligentConfig.taskCheckFields.some(item => item.task_receipt === this.field.id)
        }
      }
    },
    // 是否存在智能质检字段
    isIntelligentFieldShow() {
      if (this.intelligentConfig && Object.keys(this.intelligentConfig).length > 0) {
        if (Reflect.has(this.intelligentConfig, 'pictureCheckSwitch') && this.intelligentConfig.pictureCheckSwitch) {
          return true
        }
      }
      return false
    },
    intelligentNew() {
      let taskView = findComponentUpward(this, 'task-view')
      let taskReceiptDetailView = findComponentUpward(this, 'task-receipt-detail-view')
      let taskDetailView = findComponentUpward(this, 'task-detail-view')
      if (taskView) {
        return taskView?.$props.intelligentConfig || {}
        
      }
      if (taskDetailView && taskReceiptDetailView) {
        return taskDetailView?.$data.intelligentConfig || {}
      }
      return {}
    },
    intelligentConfig() {
      try {
        return this.intelligentNew || {}
      } catch (error) {
        console.error(error)
      }
    }
  },
  methods: {
    openIntelligentStandard() {
      this.$refs.intelligentStandard.open()
    }
  },
  mounted() {
    // try {
    //   if(this.intelligentCheckField) {
    //     this.intelligentConfig = this.initData?.taskType?.config?.intelligentConfig || {}
    //   }
    // } catch(error) {
    //   console.error(error)
    // }
  },
  components: {
    [IntelligentStandardDialog.name]: IntelligentStandardDialog
  }
}
</script>
<style lang="scss">
// 智能质检
.form-view-row-label {
  position: relative;
  .form-view-row-intelligent-rule-icon {
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #262626;
    cursor: pointer;
  }
  .form-view-row-intelligent-icon {
    position: absolute;
    top: -20px;
    img {
      width: 32px;
      height: auto;
    }
    div {
      position: absolute;
      top: 17px;
      left: 4px;
      width: 0px;
      height: 0px;
      margin: auto;
      border-top: 4px solid #ff5c0f;
      border-bottom: 4px solid #FFFFFF;
      border-left: 4px solid #FFFFFF;
      border-right: 4px solid #FFFFFF;
    }
  }
}
</style>
